<script src="./script.js"></script>
<style src="./style.scss" lang="scss" scoped></style>
<template>
  <div>
    <web-header></web-header>

    <div class="wrap w" v-if="quoteData">
      <div class="bread pl10">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>在线报价</el-breadcrumb-item>
          <el-breadcrumb-item>名片</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="pl10">

        <div class="fitem">
          <label class="label">类别：</label>
          <div class="">
            <el-radio-group v-model="quoteValue.category">
              <el-radio-button :label="item" v-for="item in quoteData.cateData.list"></el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="fitem">
          <label class="label">款式：</label>
          <div class="">
            <el-input v-model="quoteValue.style" type="number" style="width: 120px">
              <template slot="append">款</template>
            </el-input>
          </div>
          <div class="" style="margin-left:10px;">
            <el-radio-group v-model="quoteValue.side">
              <el-radio-button :label="item.label" :value="item.value" v-for="item in processSelectOptions.side"></el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="fitem">
          <label class="label">尺寸：</label>
          <div style="display: flex;align-items: center;">
            <el-switch
              v-model="customSize"
              active-text="自定义尺寸"
              style="margin-right: 10px;"
            >
            </el-switch>

            <div v-if="!customSize">
              <el-select v-model="quoteValue.size" placeholder="请选择" style="width: 120px" v-if="!customSize">
                <el-option
                  v-for="item in quoteData.sizeData.list"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </div>

            <div v-if="customSize">
              <el-input v-model="quoteValue.customLength" style="width:120px"></el-input>
              *
              <el-input v-model="quoteValue.customWidth" style="width:120px"></el-input>
            </div>

            <span style="margin-left: 5px;">mm</span>

            <div style="margin-left: 10px;color: red;font-weight: bold" v-if="false">占用{{ positionCount }}个名片位</div>

          </div>
        </div>

        <div class="fitem">
          <label class="label">数量：</label>
          <div class="" style="margin-right: 10px;">
            <el-radio-group v-model="quoteValue.quantity">
              <el-radio-button :label="item" v-for="item in quoteData.stepData.list"></el-radio-button>
            </el-radio-group>
          </div>
<!--          <div>-->
<!--            <el-input placeholder="请输入数量" v-model="quoteValue.quantity">-->
<!--              <template slot="prepend">自定义数量</template>-->
<!--            </el-input>-->
<!--          </div>-->
        </div>

        <div class="fitem">
          <label class="label">工序：</label>
          <div class="" style="margin-right: 10px;">
            <div class="process">
              <div class="panel">
                <div class="item">
                  <el-checkbox v-model="checkValue.flagPerforating" style="margin-right:10px">打孔</el-checkbox>
                  <el-select size="mini" v-model="quoteValue.perforating" v-if="checkValue.flagPerforating" placeholder="正反面" style="width:80px">
                    <el-option
                      v-for="item in processSelectOptions.perforating"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagRoundCorners" style="margin-right:10px">切圆角</el-checkbox>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagFrontStamping" style="margin-right:10px">正面烫金</el-checkbox>
                  <el-select size="mini" v-model="quoteValue.frontStamping" value-key="name" v-if="checkValue.flagFrontStamping" placeholder="尺寸" style="width:100px">
                    <el-option
                      v-for="item in quoteData.process.stamping"
                      :key="item.name"
                      :label="item.name"
                      :value="item">
                    </el-option>
                  </el-select>
                  <el-select size="mini" v-model="quoteValue.frontStampingColor" v-if="checkValue.flagFrontStamping" placeholder="颜色" style="width:100px">
                    <el-option
                      v-for="item in quoteData.process.stampingColor"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagReverseStamping" style="margin-right:10px">反面烫金</el-checkbox>
                  <el-select size="mini" v-model="quoteValue.reverseStamping" value-key="name" v-if="checkValue.flagReverseStamping" placeholder="尺寸" style="width:100px">
                    <el-option
                      v-for="item in quoteData.process.stamping"
                      :key="item.name"
                      :label="item.name"
                      :value="item">
                    </el-option>
                  </el-select>
                  <el-select size="mini" v-model="quoteValue.reverseStampingColor" v-if="checkValue.flagReverseStamping" placeholder="颜色" style="width:100px">
                    <el-option
                      v-for="item in quoteData.process.stampingColor"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagCut" style="margin-right:10px">模切</el-checkbox>
                  <div class="item-size" v-if="checkValue.flagCut">
                    <el-input v-model="quoteValue.cut" size="mini" type="number" class="input" />
                    <span>模</span>
                  </div>
                </div>
              </div>
              <div class="panel">
                <div class="item">
                  <el-checkbox v-model="checkValue.flagStampingNumber" style="margin-right:10px">烫金号码1个</el-checkbox>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagColorlessBump" style="margin-right:10px">无色凹凸</el-checkbox>
                  <div class="item-size" v-if="checkValue.flagColorlessBump">
                    <el-input v-model="quoteValue.colorlessBumpLength" size="mini" type="number" class="input" />
                    <span>x</span>
                    <el-input v-model="quoteValue.colorlessBumpWidth" size="mini" type="number" class="input" />
                    <span>mm</span>
                  </div>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagPressLine" style="margin-right:10px">压线</el-checkbox>
                  <div class="item-size" v-if="checkValue.flagPressLine">
                    <el-input v-model="quoteValue.pressLineCount" size="mini" type="number" class="input" />
                    <span>条</span>
                  </div>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagBeerPinholeLine" style="margin-right:10px">啤针孔线</el-checkbox>
                  <div class="item-size" v-if="checkValue.flagBeerPinholeLine">
                    <el-input v-model="quoteValue.flagBeerPinholeLineCount" size="mini" type="number" class="input" />
                    <span>条</span>
                  </div>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagHairLineShipping" style="margin-right:10px">毛边出货</el-checkbox>
                </div>
                <div class="item">
                  <el-checkbox v-model="checkValue.flagCutFinished" style="margin-right:10px">切成品</el-checkbox>
                  <div class="item-size" v-if="checkValue.flagCutFinished">
                    <el-input v-model="quoteValue.cutFinishedLength" size="mini" type="number" class="input" />
                    <span>x</span>
                    <el-input v-model="quoteValue.cutFinishedWidth" size="mini" type="number" class="input" />
                    <span>mm</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>

      <div class="pl10" style="width:600px;margin-bottom:10px;" v-if="quoteList">
        <el-table
          :data="quoteList"
          border
          fit
        >
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <span>{{ row.quantity }}</span>
            </template>
          </el-table-column>
          <el-table-column label="材料">
            <template slot-scope="{row}">
              <span>{{ row.materialAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="后道工序">
            <template slot-scope="{row}">
              <span>{{ row.processAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="总价">
            <template slot-scope="{row}">
              <span>{{ row.totalAmount }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pl10" style="margin-bottom: 10px;" v-if="quoteList">
        <div style="margin-bottom: 10px;">请上传设计文件，最多10个文件，单文件不超2M</div>
        <el-upload
          action="#"
          :multiple="true"
          :file-list="fileList"
          list-type="text"
          :http-request="handleUpload"
          :auto-upload="true"
          :limit="10"
        >
          <el-button size="small" plain>点击上传</el-button>
        </el-upload>
      </div>

      <div class="pl10" style="margin-bottom: 10px;font-weight: bold" v-if="quoteList">
        <span style="color: #C03639;font-size: 16px;margin-right:20px;">￥{{ postData.amount }}</span>{{ postData.detail }}
      </div>

      <div class="pl10" style="display: flex; align-items: center;margin-bottom: 10px;">
        <el-button type="primary" size="large" plain @click="getQuote">获取报价</el-button>
        <el-button type="primary" size="large" @click="submitOrder" v-if="quoteList">提交订单</el-button>
        <div style="color: red;margin-left: 10px;">*下单人承诺：所提供资料（含知识产权）真实、合法，由此引发的所有问题由下单人负责，此订单等同于<a href="#">《印刷委托书》</a></div>
      </div>

      <div class="pl10" style="margin-bottom: 10px;">
        <div v-for="item in logic">{{ item }}</div>
      </div>


    </div>

  </div>
</template>
